<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn">存储cookie(path)</button>
</body>
<script>
    // cookie的创建
    // 使用cookie的前提 !!!!!   必须在服务器的环境下(必须用live server打开  不能用本地打开)

    // 1. cookie 的存取都依赖于 document.cookie
    // 2. cookie是以键值对(key=val)形式存在的字符串
    // 3. cookie是一条一条存储的(每次只能存储一条),取的时候将所有cookie整合成一整条字符串(每天数据之间用分号和空格查分)

    // cookie的时效性  
    // cookie是可以设置过期时间的,默认浏览器关闭就过期,如果想要设置过期时间需要对cookie进行额外的修饰,通过设置expires属性  添加过期时间的修饰   
    // expires 接收一个字符串类型的时间(要求是世界时 (北京时间会多8个小时))

    // 如何将北京时间转为 世界时?
    // date.toUTCString()






    // 存 (默认)
    // document.cookie = "user=a123123";
    // document.cookie = "pwd=123123";
    // document.cookie = "phone=17386141517";
    // document.cookie = "email=123@qq.com";

    // 存 (设置过期时间)
    // var date = new Date();
    // date.setDate(date.getDate() + 7);  // 在原本的日期基础上加7
    // date.toString();

    // document.cookie = "user=a123123;expires=" + date.toUTCString();
    // document.cookie = "pwd=123123;expires=" + date.toUTCString();
    // document.cookie = "phone=17386141517;expires=" + date.toUTCString();
    // document.cookie = "email=123@qq.com;expires=" + date.toUTCString();

    // cookie的跨页面访问 ()
    // cookie 是可以设置存储路径的  默认存储在当前文件所在的目录,默认只有当前目录及其子目录中所有的文件可以访问
    // 如果想要改变cookie的存储路径   需要对cookie进行额外的修饰,通过设置path属性进行修饰

    var btn = document.querySelector(".btn");

    btn.onclick = function () {
        // 存 (设置过期时间  + 存储路径)
        var date = new Date();
        date.setDate(date.getDate() + 7);  // 在原本的日期基础上加7

        document.cookie = "user=a123123;expires=" + date.toUTCString() + ";path=/";
        document.cookie = "pwd=123123;expires=" + date.toUTCString() + ";path=/";
        document.cookie = "phone=17386141517;expires=" + date.toUTCString() + ";path=/";
        document.cookie = "email=123@qq.com;expires=" + date.toUTCString() + ";path=/";
    }











</script>

</html>